<template>
  <div class="dynamics" >
    <div v-if="isLoading" class="dyn-loading">
      <loading style="margin-top: 300px"></loading>
    </div>

    <div v-else class="dynamics-list" >
      <div v-if="$store.getters.getAddState" id="add-dyn-close">
        <add-dynamic></add-dynamic>
      </div>

      <div v-for="item in dynamicList" :key="item.id" >
        <dynamic-box-2  :dynamicMap="dynamicMap[item.id]" :likeLists="likeList" :collectionList="collections" :dynamic="item" ></dynamic-box-2>
      </div>
      <div style="height: 760px;display: flex;justify-content: center;" v-if="dynamicList.length==0">
        <h2 style="margin-top: 200px">暂时没有动态噢~，快去关注喜欢的人吧~</h2>
      </div>


      <div id="Pagination">
        <el-pagination
            :current-page="page.current"
            background
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="page.total">
        </el-pagination>
      </div>


    </div>
    <div class="card">
<!--      <card></card>-->
      <card-tab></card-tab>
      <div style="position: sticky;top: 10px">
        <card-user ></card-user>
        <ranking></ranking>
      </div>
    </div>
  </div>
</template>

<script>
import DynamicBox2 from "@/components/content/DynamicBox-2";
import {getConcernDynamic} from "@/api/dynamic";
import CardTab from "@/components/content/Card/CardTab";
import CardUser from "@/components/content/Card/CardUser";
import Ranking from "@/components/content/Ranking";
import AddDynamic from "@/components/content/AddDynamic";
import Loading from "@/components/conmmon/Loading";
import {getConcernList} from "@/api/user";
export default {
  name: "Dynamic",
  components: {Loading, AddDynamic, Ranking, CardUser, CardTab, DynamicBox2},
  data(){
    return{
      isLoading:true,
      dynamicList:[],
      dynamicMap:{},
      likeList:[],
      collections:[],
      page:{
        current:1,
        pages:0,
        total:0
      }
    }
  },
  created() {
    // console.log(this.dynamic)
    this.getData(this.page.current)
    let {uid,uType}=this.$store.getters["user/getUser"]
    getConcernList(uid,uType).then(res=>{
      this.$store.commit('user/SET_CONCERNLIST',res.data.extend.concernList)
    })
  },
  beforeDestroy() {
    //切换页面销毁展开状态
    this.$store.commit("comment/CLEAN_ACTIVE")
    this.$store.commit("CLOSE_ADD")
  },
  methods:{
    load(){
      alert("到底了!")
    },
    currentChange(val){
      this.getData(val)
    },
    getData(index){
      const user=this.$store.getters["user/getUser"]
      getConcernDynamic(user.uid,user.uType,index).then(res=>{
        console.log(res)
        this.page.current=res.data.extend.page.current
        this.page.total=res.data.extend.page.total
        this.page.pages=res.data.extend.page.pages
        this.dynamicMap=res.data.extend.dynamicMap
        this.likeList=res.data.extend.likeLists
        this.dynamicList=res.data.extend.page.records
        this.collections=res.data.extend.collections
        setTimeout(()=>{
          this.isLoading=false
        },100)
        this.$store.commit("comment/SET_COMMENTMAP",res.data.extend.map)
      })

    }
  }
}
</script>

<style lang="stylus" scoped>
@keyframes addDy
  0%
    margin-top -190px
  70%
    margin-top 40px
  100%
    margin-top 0
#add-dyn-close
  margin-top -190px
  animation addDy .5s ease-in-out forwards
#add-dyn-open
  margin-top 0px
  transition all .3s ease-out
.dynamics
  margin 10px 0
  width 100%
  display flex
  justify-content space-between
  //background white
.dyn-loading
  background white
  width 70%
  display flex
  justify-content center
.dynamics-list
  background white
  height 80%
  width 70%
  overflow hidden
.card
  width 28%
#Pagination
  width 100%
  display flex
  justify-content center
</style>
